<template>
  <div id="orders">
    <el-table
      :data="orders"
      style="width: 100%"
      border
    >
      <el-table-column prop="orderId" label="订单编号" width="180"></el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="180"></el-table-column>
      <el-table-column prop="payTime" label="支付时间" width="180"></el-table-column>
      <el-table-column prop="orderState" label="订单状态" width="180">
        <template slot-scope="scope">{{ judgeState(scope.row.orderState) }}</template>
      </el-table-column>
      <el-table-column prop="totalPrice" label="总价" width="180"></el-table-column>
      <el-table-column prop="cart" label="订单操作" width="250">
        <template slot-scope="scope">
          <el-button round @click="seeDetail(scope.row)" >查看详情</el-button>
          <el-button round @click="payUnPayOrder(scope.row.orderId)" :disabled="scope.row.orderState == 0?false:true">支付订单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="订单详情界面" :visible.sync="dialogFormVisible">

      <el-table :data="orderDetail" style="width: 100%">
        <el-table-column prop="orderId" label="订单编号" width="90"></el-table-column>
        <el-table-column prop="productId" label="产品编号" width="90"></el-table-column>
        <el-table-column prop="productName" label="产品名" width="90"></el-table-column>
        <el-table-column prop="quantity" label="产品数量" width="90"></el-table-column>
        <el-table-column prop="remark" label="产品备注" width="180"></el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import {getUserInfo, getUserOrder, payOrder} from "@/API/UserAPI";
import {getOrderDetail} from "@/API/OrderAPI";
import Message from "@/utils/message";
export default {
  name: "Orders",
  data() {
    return {
      isPay:false,
      userId:"",
      orders: [],
      orderDetail:[],
      dialogFormVisible: false,
    };
  },
  async mounted() {

    //var getLocalData = localStorage.getItem("userInfo");
    var result = await getUserInfo();
    this.userId=result.data.userId;
    this.getOrders();
  },
  methods: {
    payUnPayOrder(orderId){
      this.$router.push({
        name: "Payment",
        params: {
          orderId: orderId,
        },
      })
    },
    judgeState(orderState) {
      switch (orderState) {
        case 0:
          return "未支付";
        case 1:
          return "已支付";
        case 2:
          return "已取消";
        case 3:
          return "异常";
        default:
          return "无效";
      }
    },
    getOrders() {
      // 调用getUserOrder接口，传入用户id，获取用户自己的订单数据
      getUserOrder(this.userId)
      .then(res => {
        this.orders = res.data;
      })
      .catch(err => {
        console.log(err);
      });
    },
    async seeDetail(row){
      this.dialogFormVisible = true;
      try {
        let result = await getOrderDetail(row.orderId);
        this.orderDetail = result.data;
        console.log(this.orderDetail);
        Message.success(this, "订单详情加载成功。");
      } catch (error) {
        Message.error(this, "订单详情加载失败。");
        throw error;
      }
    }
  },
};
</script>
